<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <template v-if="screenType==='reportAuto'">
        <el-form-item label="设备类型" label-width="120px">
          <el-select v-model="optionsInfo.reportType" placeholder="请选择设备类型">
            <el-option
                v-for="item in reportTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="区域高度" label-width="120px">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>

      <el-form-item label="非预约时间报到确认弹窗" class="column-info">
        <el-switch v-model="optionsInfo.NoETASure"/>
      </el-form-item>
      <el-form-item label="非预约时间报到确认弹窗关闭倒计时(s)" label-width="120px" class="column-info">
        <el-input-number
            :disabled="!optionsInfo.NoETASure"
            :min="1"
            :max="120"
            :step="1"
            size="small"
            v-model="optionsInfo.layerNoETASureCountdown"
        />
      </el-form-item>

      <el-form-item label="弹层倒计时(s)" label-width="120px">
        <el-input-number
            :min="1"
            :max="60"
            :step="1"
            size="small"
            v-model="optionsInfo.layerCountdown"
        />
      </el-form-item>
      <el-form-item label="返回倒计时(s)" label-width="120px">
        <el-input-number
            :min="1"
            :max="120"
            :step="1"
            size="small"
            v-model="optionsInfo.backCountdown"
        />
      </el-form-item>
      <el-form-item label="复诊倒计时(s)" label-width="120px">
        <el-input-number
            :min="1"
            :max="60"
            :step="1"
            size="small"
            v-model="optionsInfo.furtherDoctorCountdown"
        />
      </el-form-item>
      <template v-if="screenType==='reportAuto'">
        <el-form-item label="文本内容" class="content-screen">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="optionsInfo.content"
              :autosize="{ minRows: 2, maxRows: 4}"
          />
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number
              :min="42"
              :max="70"
              size="small"
              v-model="optionsInfo.fontSize"
          />
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo.fontColor"
          />
        </el-form-item>
      </template>
      <el-form-item label="数据加载等待文案" class="column-info">
        <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="optionsInfo.popupLoadingContent"
            :autosize="{ minRows: 2, maxRows: 4}"
        />
      </el-form-item>
    </div>

    <template v-if="true">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">完成报到显示字段</el-divider>
        </div>
        <!--报到患者顶部字段-->
        <el-form-item class="finish-files" v-if="true">
          <el-checkbox-group v-model="checkedTopFields" :min="1">
            <el-checkbox
                v-for="item in showFieldsOptions('topFields')"
                :label="item.value"
                :key="item.value"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!--  选中诊室--设置显示字段 -->
        <div class="list-item-setting" v-if="true">
          <div class="title-info">
            <el-divider content-position="left">诊室设置</el-divider>
          </div>
          <div>
            <roomNameKeyEditor
                businessType="special"
                :designer="designer"
                :selected-widget="selectedWidget"
                :option-model="optionModel"
            />
          </div>
        </div>

        <!--报到患者底部字段-->
        <el-form-item class="finish-files" v-if="true">
          <el-checkbox-group v-model="checkedBottomFields" :min="1">
            <Draggable
                class="list-group"
                @end="handleDragEnd"
                :list="showFieldsOptions('bottomFields')"
                :animation="100"
            >
              <el-checkbox
                  v-for="(item,index) in showFieldsOptions('bottomFields')"
                  :key="index"
                  :label="item.value"
              >
                {{ item.label }}
                <i class="el-icon-thumb"/>
              </el-checkbox>
            </Draggable>
          </el-checkbox-group>
        </el-form-item>

      </div>
    </template>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">患者信息设置</el-divider>
      </div>
      <el-form-item label="隐私保护" class="finish-files">
        <el-switch
            active-value="1"
            inactive-value="0"
            active-text="显示"
            inactive-text="隐藏"
            class="main-el-switch"
            v-model="optionsInfo['isNameProtect']"
        />
      </el-form-item>
      <el-form-item label="诊结数据查询" class="finish-files">
        <el-switch
            active-value="1"
            inactive-value="0"
            active-text="显示"
            inactive-text="隐藏"
            class="main-el-switch"
            v-model="optionsInfo['isTreatEndPatient']"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">一键到道设置</el-divider>
      </div>

      <el-form-item label="一键报到按钮" class="finish-files">
        <el-switch class="main-el-switch" v-model="optionsInfo['handReportAll']" active-text="显示"
                   inactive-text="隐藏"/>
      </el-form-item>

      <el-form-item label="多个号别是否自动报到" class="finish-files">
        <el-switch class="main-el-switch" v-model="optionsInfo['autoReportAll']" active-text="开启"
                   inactive-text="关闭"/>
      </el-form-item>
    </div>

    <!--输入框提示-->
    <div class="list-item-setting" v-if="optionsInfo?.type!=='full-keyboard'">
      <div class="title-info">
        <el-divider content-position="left">输入框提示设置</el-divider>
      </div>
      <el-form-item label="输入框提示设置" class="number-area">
        <div class="header-wrap">
          <el-input
              placeholder="请输入内容"
              v-model="optionsInfo.placeholder"
          />
        </div>
      </el-form-item>
    </div>

    <div class="list-item-setting" v-if="screenType!=='reportAuto'">
      <div class="title-info">
        <el-divider content-position="left">温馨提示</el-divider>
      </div>
      <template v-if="optionsInfo?.type==='number-keyboard'">
        <el-form-item label="输入提示标题" class="number-area">
          <div class="header-wrap">
            <el-input
                placeholder="请输入内容"
                v-model="optionsInfo.tipsTitle"
            />
          </div>
        </el-form-item>

        <el-form-item label="标题字号">
          <el-input-number
              :min="12"
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo.tipsFontSize"
          />
        </el-form-item>

        <el-form-item label="标题颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo.tipsFontColor"
          />
        </el-form-item>

        <el-form-item label="温馨提示">
          <el-button
              type="primary"
              size="small"
              @click="handleSelect('formEditorInfo',(optionsInfo.tipContent))"
          >
            文本内容
          </el-button>
        </el-form-item>


      </template>

      <template v-if="optionsInfo?.type === 'guide-keyboard'">

        <el-form-item label="标题字号">
          <el-input-number
              :min="12"
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo.tipsFontSize"
          />
        </el-form-item>

        <el-form-item label="标题颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo.tipsFontColor"
          />
        </el-form-item>

        <el-form-item label="温馨提示内容" class="number-area">
          <div class="header-wrap">
            <el-input
                placeholder="请输入内容"
                v-model="optionsInfo.tipContent"
            />
          </div>
        </el-form-item>

      </template>
    </div>
    <div v-if="optionsInfo.bankReportInfoConfig">
      <div class="title-info" >
        <el-divider content-position="left">银医自助</el-divider>
      </div>
      <el-form-item
        label="银医-图标"
        class="logo-area-set"
      >
        <div class="picture-wrap-qrcode">
          <template v-if="!!optionsInfo?.qrcodeUrl2">
            <img :src="`${optionsInfo.qrcodeUrl2}`"  />
            <p class="icon-wrap" @click="handleDeletePicture('qrCode2')">
              <i class="el-icon-close icon-delete" />
            </p>
          </template>
          <template v-else>
            <div
              class="el-upload el-upload--text"
              @click="handleSelectPicture('qrcodeUrl2')"
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item label="服务短号">
          <el-input
              placeholder="请输入内容"
              v-model="optionsInfo.ServiceCornet"
          />
      </el-form-item>
      <el-form-item label="服务电话">
          <el-input
              placeholder="请输入内容"
              v-model="optionsInfo.serviceCall"
          />
      </el-form-item>
      <el-form-item label="设备编号">
          <el-input
              placeholder="请输入内容"
              v-model="optionsInfo.equipmentNumber"
          />
      </el-form-item>
      <el-form-item label="位置">
          <el-input
              placeholder="请输入内容"
              v-model="optionsInfo.DeviceLocation"
          />
      </el-form-item>
      <el-form-item label="版本">
          <el-input
              placeholder="请输入内容"
              v-model="optionsInfo.DeviceVersion"
          />
      </el-form-item>
      <el-form-item label="头部内容">
        <el-input
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.reportHeaderConfig.descriptor"
        />
      </el-form-item>
      <el-form-item label="底部内容">
        <el-input
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.tipsConfig.contentInfo"
        />
      </el-form-item>
    </div>
    
    <div class="list-item-setting" v-if="routerInfo">
      <div class="title-info">
        <el-divider content-position="left">进程预览</el-divider>
      </div>
      <el-form-item label="进程" class="process-step">
        <div class="header-wrap">
          <div class="title">进程</div>
          <el-button type="primary" size="mini" round @click="()=>handleNext(optionsInfo.step)">
            下一步
          </el-button>
        </div>

        <Steps direction="vertical" :active="optionsInfo.step">
          <Step v-for="(item,index) in (optionsInfo.stepOptions ||stepOptions)" :key="index">
            <h3>{{ item.title }}</h3>
            <p>{{ getCurrentTime }}</p>
          </Step>
        </Steps>
      </el-form-item>
    </div>

    <!--更新文本内容-->
    <updateFormEditor
        :visible="formEditorInfo.visible"
        :info="formEditorInfo.info"
        @handleCancel="handleCancel"
        @handleSure="handleSure"
    />
    <!--选择图片的弹层-->
    <SelectPicture
      :info="PictureInfo.info"
      :visible="PictureInfo.visible"
      @handleSure="PictureHandleSure"
      @handleCancel="PictureHandleCancel"
    />
  </div>
</template>

<script>
import {Step, Steps} from 'vant';
import Draggable from "vuedraggable"
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import updateFormEditor from "@c/public/layer/template/updateFormEditor/index.vue";
import roomNameKeyEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";

export default {
  name: "reportInfoConfig-editor",
  componentName: "reportInfoConfig-editor",
  mixins: [],

  components: {
    Draggable,
    roomNameKeyEditor,
    updateFormEditor,
    Step,
    Steps,
    SelectPicture
  },

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      radio: 1,
      screenType: '',
      optionsInfo: Object(),
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
      stepOptions: [
        {
          title: '【报到机】首页',
        },
        {
          title: '【报到机】状态',
        }
      ],
      formEditorInfo: {
        info: Object(),
        visible: false
      },
      // 报到机的类型
      reportTypeOptions: [
        {
          value: 1,
          label: 'R22(R32)'
        },
        {
          value: 2,
          label: 'R22A'
        }
      ],
      //报到机允许展示的字段
      patientShowFields: types['patientFields'],
      checked: [],
      options: [
        {label: '上海', value: '1'},
        {label: '北京', value: '2'},
        {label: '广州', value: '3'},
        {label: '深圳', value: '4'},
      ],
       PictureInfo: {
        visible: false,
        info: 1,
      },
    }
  },

  computed: {
    // 获取当前时间
    getCurrentTime(){
      return this.$day().format('YYYY-MM-DD HH:mm:ss');
    },
    // 获取报到机所在的路由状态
    routerInfo() {
      const self = this;
      let {params} = (self.$route);
      return params?.type !== 'edit';
    },

    // 报到机器允许编辑的字段选项
    showFieldsOptions() {
      return function (type) {
        let {patientShowFields = this.patientShowFields} = this.optionsInfo;
        switch (type) {
          case 'topFields':
            return patientShowFields?.topFields
          case 'bottomFields':
            return patientShowFields?.bottomFields
        }
      }
    },

    // 选中的顶部字段
    checkedTopFields: {
      get() {
        let {topCheckList = ['orderNo', 'countNum', 'registerNameKey', 'roomKey']} = this.optionsInfo;
        return topCheckList;
      },
      set(val) {
        this.$set(this.optionsInfo, 'topCheckList', val)
      },
    },

    // 选中的底部字段
    checkedBottomFields: {
      get() {
        let {bottomCheckList = ['deptName', 'patientCardNoHide', 'patientName']} = this.optionsInfo;
        return bottomCheckList;
      },
      set(val) {
        this.$set(this.optionsInfo, 'bottomCheckList', val)
      },
    },
  },

  mounted() {
    let info = this.$store.getters['getReportStepInfo'];
    this.$set(this.optionsInfo, 'step', info);
  },

  methods: {
     // 取消弹层
    PictureHandleCancel(){
      Reflect.set(this.PictureInfo, "visible", false);
    },
    // 替换LOGO
    PictureHandleSure(val) {
      if (this.$lodash.isEmpty(val)) return;
      Reflect.set(this.optionsInfo, "qrcodeUrl2", val.val.url);
    },
    // 选择图片
    handleSelectPicture(value) {
      let info = Object();
      let { qrcodeUrl2 } = this.optionsInfo;
      Reflect.set(info, "content", qrcodeUrl2);
      Reflect.set(info, "type", 1);
      Reflect.set(this.PictureInfo, "visible", true);
      Reflect.set(this.PictureInfo, "info", info);
    },
    // 删除logo
    handleDeletePicture(value) {
      Reflect.set(this.optionsInfo, "qrcodeUrl2", null);
    },
    handleDragEnd() {

    },
    // 下一步
    handleNext() {
      const self = this;
      let {step, stepOptions} = (self.optionsInfo);
      // if (++step > 1) {
      let len = stepOptions ? stepOptions.length : this.stepOptions.length
      if (++step > len - 1) {
        this.$set(this.optionsInfo, 'step', 0);
      } else {
        this.$set(this.optionsInfo, 'step', step);
      }
      this.$store.dispatch('setReportStepInfo', (self.optionsInfo.step));
    },

    // 失去焦点触发事件
    onEditorBlur() {
    },

    // 获得焦点触发事件
    onEditorFocus() {
    },

    // 选择文本内容&视频
    handleSelect(val, content) {
      let params = Object();
      switch (val) {
        case 'formEditorInfo':
          Reflect.set(params, 'updataType', 'tipContent');
          Reflect.set(params, 'content', content || '')
          Reflect.set((this.formEditorInfo), 'visible', true);
          Reflect.set((this.formEditorInfo), 'info', params);
          break
      }
    },

    // 关闭弹层
    handleCancel() {
      Reflect.set(this.formEditorInfo, 'visible', false)
    },

    // 更新就的数据
    handleSure(valInfo) {
      let {key, val} = valInfo;
      Reflect.set((this.optionsInfo), key, val);
    }
  },

  watch: {
    // 组件的所有信息
    selectedWidget: {
      handler: function (val) {
        console.log(val.screenDataType)
        this.screenType = (val.screenDataType);
      },
      deep: true,
      immediate: true
    },

    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        let key = (val.config)
        let info = val[key]
        if (!(!!info && Reflect.get(info, 'patientShowFields'))) {
          Reflect.set(info, 'patientShowFields', this.patientShowFields)
        }
        this.optionsInfo = info;
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<style lang="scss" scoped>
.process-step {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    display: none;
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;;
  }

  .header-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    align-self: center;
    align-items: center;

    .title {
      @include fontWeight();
      font-size: 20px;
    }

    .el-button {
      padding: 8px 22px
    }
  }

}

.number-area,
.tips-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 14px;
  align-self: center;
  align-items: center;

  :deep(.el-form-item__label) {
    width: 100% !important;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;
  }

  :deep(.ql-toolbar) {
    padding: 0;

    .ql-formats {
      .ql-size .ql-picker-label {
        border: none;

        &::before {
          position: relative;
          top: -4px;
          font-size: 14px;
        }
      }
    }
  }

  :deep(.ql-container) {
    min-height: 180px;
    height: 180px;
    line-height: 58px;
    overflow: auto;


    .ql-editor p {
      line-height: 28px !important;
    }
  }
}

.content-screen {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    font-weight: bolder;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-textarea__inner {
      line-height: 34px;
    }
  }
}

.column-info {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;

    .el-select {
      width: 100%;
    }

    .el-radio-group {
      .el-radio {
        width: 100%;
        padding: 8px 0;
      }
    }

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
  }
}

.finish-files {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 8px;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-checkbox-group {
      display: flex;
      flex-direction: column;

      .list-group {
        display: flex;
        flex-direction: column;
      }
    }
  }


  :deep(.main-el-switch) {
    position: relative;

    .el-switch__core {
      height: 24px;
      border-radius: 12px;
      min-width: 65px;

      &:after {
        left: 4px;
        top: 3px;
      }
    }

    &.el-switch {
      &.is-checked {
        .el-switch__core {
          &:after {
            margin-left: -20px;
            left: 100%;
          }
        }
      }
    }

    &.is-checked {
      .el-switch__label--left {
        opacity: 0;
      }

      .el-switch__label--right {
        opacity: 1;
      }
    }

    .el-switch__label {
      position: absolute;
      top: 1px;
    }

    .el-switch__label--left {
      right: 0;
      color: #999;
      z-index: 1;
      margin-right: 8px;
    }

    .el-switch__label--right {
      left: 0;
      color: #fff;
      opacity: 0;
      margin-left: 8px;
    }
  }
}
.logo-area-set {
  display: flex;
  position: relative;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    display: flex;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button {
      position: absolute;
      top: -30px;
      right: 0;
    }

    .picture-wrap {
      margin: 10px 0 20px 0;
      position: relative;
      overflow: hidden;

      img {
        border-radius: 12px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 108px;
        height: 108px;
        cursor: pointer;
        line-height: 116px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }

    .picture-wrap-qrcode {
      width: 456px;
      height: 96px;
      // margin: 10px 0 20px 0;
      position: relative;
      overflow: hidden;

      img {
        border-radius: 12px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 80px;
        height: 80px;
        // width: 108px;
        // height: 108px;
        cursor: pointer;
        // line-height: 116px;
        line-height: 80px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          // font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
}
</style>